<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>My Order Detail</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../resources/css/mui.css">
		<link rel="stylesheet" href="../../resources/css/style.css">
		<link rel="stylesheet" href="../../resources/css/order/pdp.css">
		<script src="../../resources/assets/mui.js"></script>
		<script src="../../resources/assets/avalon.js"></script>
		<script src="../../resources/assets/jquery-2.0.3.min.js"></script>
		<script src="../../resources/js/common.js"></script>
		<script src="../../resources/js/dahua.config.js"></script>
		<script src="../../resources/js/order/pdp.js"></script>
	</head>
	
	<body ms-controller="orderPage">
		<!--头部-->
		<header class="mui-bar mui-bar-nav header">
			<h1 id="title" class="mui-title">Order Detail</h1>
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left mui-icon-white"></a>
			<div class="mui-btn mui-btn-primary mui-pull-right receipt"  :visible="@isReceipted!=1">
				<a href="javascript:void(0);" style="width: 100%;height: 100%;">Receipt</a>
			</div>
		</header>

		<div id="order-pdp" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">

				<div class="mui-card">
					<div class="mui-card-content">
						<div class="mui-card-content-inner">
							<div class="mui-row" :visible="@type=='po'">
								<div class="mui-col-xs-4">
									<h5>Client PO</h5>
								</div>
								<div class="mui-col-xs-8">
									<h5 class="mui-text-left content">{customerPo}</h5>
								</div>
							</div>
							<div class="mui-row" :visible="@type=='ci'">
								<div class="mui-col-xs-4">
									<h5>CI NO</h5>
								</div>
								<div class="mui-col-xs-8">
									<h5 class="mui-text-left content">{invoiceNo}</h5>
								</div>
							</div>
							<div class="mui-row">
								<div class="mui-col-xs-4">
									<h5>Delivery Date</h5>
								</div>
								<div class="mui-col-xs-8">
									<h5 class="mui-text-left content">{outDate | date("yyyy-MM-dd") }</h5>
								</div>
							</div>
							
							<div class="mui-row">
								<div class="mui-col-xs-4">
									<h5>Delivery Qty</h5>
								</div>
								<div class="mui-col-xs-8">
									<h5 class="mui-text-left content">{sendQty}</h5>
								</div>
							</div>

						</div>
					</div>
				</div>

				<div class="mui-card order-selected" ms-class="{'mui-hidden': (@signItems.length==0 || @isReceipted==1)}">
					<div class="mui-input-row mui-checkbox mui-left order-item">
						<label>Select All/Deselect All</label>
						<input name="selectAll" type="checkbox">
					</div>
				</div>
				
				<div class="mui-card" style="margin-top: 0px;" ms-class="{'mui-hidden': (@signItems.length==0)}">
					<div class="mui-card-content">
						<div class="mui-card-content-inner order-item">
							<ul class="mui-table-view">
								<li class="mui-table-view-cell">
									<div class="mui-row">
										<div class="mui-col-xs-2" :visible="@isReceipted!=1">Select</div>
										
										<div class="mui-col-xs-3" :visible="@isReceipted!=1" style="text-align: center;">Description</div>
										<div class="mui-col-xs-3" :visible="@isReceipted==1" style="text-align: center;">Description</div>
										
										<div class="mui-col-xs-2" :visible="@isReceipted!=1" style="text-align: center;">Delivered<br />Qty</div>
										<div class="mui-col-xs-3" :visible="@isReceipted==1" style="text-align: center;">Delivered<br />Qty</div>
										
										<div class="mui-col-xs-3" :visible="@isReceipted!=1" style="text-align: center;">Received<br />Qty</div>
										<div class="mui-col-xs-3" :visible="@isReceipted==1" style="text-align: center;">Received<br />Qty</div>
										
										<div class="mui-col-xs-2" :visible="@isReceipted!=1" style="text-align: center;">Delivery<br />Date</div>
										<div class="mui-col-xs-3" :visible="@isReceipted==1" style="text-align: center;">Receipted<br />Date</div>
									</div>
								</li>
								<li class="mui-table-view-cell" ms-for='(i,item) in @signItems'>
									<div class="mui-row" style="vertical-align: middle !important;">
										<div class="mui-col-xs-2 mui-checkbox mui-left" :visible="@isReceipted!=1">
											<input name="items" type="checkbox" ms-attr="{'value': @item.id, 'sendQty':@item.sendQty, 'receiptedQty':@item.receiptedQty, 'norm':@item.norm}" style="position: static;padding-left: 5px !important;">
										</div>
										
										<div class="mui-col-xs-3" :visible="@isReceipted!=1" style="text-align: left;">{item.norm}</div>
										<div class="mui-col-xs-3" :visible="@isReceipted==1" style="text-align: left;">{item.norm}</div>
										
										
										<div class="mui-col-xs-2" style="text-align: center;" :visible="@isReceipted!=1">{item.sendQty}</div>
										<div class="mui-col-xs-3" style="text-align: center;" :visible="@isReceipted==1">{item.sendQty}</div>
										
										<div class="mui-col-xs-3"  style="text-align: center;" :visible="@isReceipted!=1">
											<div class="mui-input-row" style="height: 25px;">
												<input class="itemnum {item.id}"  type="number" ms-attr="{'value': @item.sendQty-@item.receiptedQty,'id':@item.id}" style="height: 25px; width: 80%; padding: 0px 5px !important;"/>
											</div>
										</div>
										<div class="mui-col-xs-3" style="text-align: center;" :visible="@isReceipted==1">
											{item.receiptedQty}
										</div>
										
										<div class="mui-col-xs-2" style="text-align: center;" :visible="@isReceipted!=1">
											{item.outDate | date("yyyy-MM-dd")}
										</div>
										<div class="mui-col-xs-3" style="text-align: center;" :visible="@isReceipted==1">
											{item.signDate | date("yyyy-MM-dd")}
										</div>
									</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!--<div class="mui-bar mui-bar-tab receipt" id="receipt" :visible="@isReceipted!=1"  style="position: fixed; left: 0;right: 0; bottom: 0;">
			<a class="mui-tab-item mui-btn-danger" href="javascript:void(0);" style="color: #fff;">
				<span class="mui-tab-label">Confirm Receipt</span>
			</a>
		</div>-->

		<div class="mui-popup mui-popup-in receipt-confirm" style="display: none;">
			<div class="mui-popup-inner">
				<div class="mui-popup-text">
					Confirm Receipt?
				</div>
			</div>
			<div class="mui-popup-buttons">
				<span class="mui-popup-button cancel">Cancel</span>
				<span class="mui-popup-button mui-popup-button-bold ok">OK</span>
			</div>
		</div>
		<div class="mui-popup-backdrop mui-active receipt-confirm" style="display: none;"></div>
	</body>

</html>